<template>
	<view>
		<z-paging :fixed="false" v-model="list" ref="paging" :paging-style="{height: `calc(100vh - 90px)`}" :default-page-size="params.pageSize" @query="getList">
			<template #top>
				<view class="search-box flex item-center">
					<image src="@/static/svg/icon-search.svg" mode="heightFix" class="icon-search"></image>
					<input type="text" placeholder="搜索用户昵称" v-model="params.nickName" class="search-inp">
				</view>
			</template>
			<view v-for="item in list" v-if="list.length" class="agent-box" :key="item.id">
				<view class="flex justify-between item-center">
					<view class="flex item-center">
						<image :src="item.avatar" mode="" class="img-avatar mr-8"></image>
						<text class="nick-name">{{item.nickName}}</text>
					</view>
					<view class="flex item-center fs-14 c3" @click="record(item)">
						<view>可用<text class="ml-4 color-secondary-warning">{{item.remainPoint}}</text></view>
						<image class="w-16 h-17 ml-4" src="@/static/svg/icon-arrow-right.svg"></image>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import {ref,watch} from 'vue'
	import {mathHeight} from '@/utils/index.js'
	import {pageUserPointsAccountApi} from '@/pagesJ/api/index.js'
	const h = ref(0)
	h.value = mathHeight(200)
	const triggered = ref(false)
	let list = ref([])
	let total = ref(0)
	const params = ref({
		nickName: '',
		pageNum: 1,
		pageSize: 15
	})
	const paging = ref()
	const record = (item) => {
		uni.navigateTo({
			url:`/pagesJ/integralSetting/pointDetail?id=${item.userId}`
		})
	}
	const getList = async (num) => {
		triggered.value = true
		uni.showLoading()
		params.value.pageNum = num
		let result = await pageUserPointsAccountApi({
			...params.value
		})
		if (result) {
			paging.value.complete(result.list)
			total.value = result.total
		}
		uni.hideLoading()
		triggered.value = false
	}
	const scrolltolower = () => {
		if (list.value.length >= total.value) {
			return
		}
		params.value.pageNum = params.value.pageNum + 1
		getList()
	}
	const onRestore = () => {
		triggered.value = false; // 需要重置
	}
	const reFresh = () => {
		list.value = []
		params.value.pageNum = 1
		getList(1)
	}
	const onRefresh = () => {
		triggered.value = true
		reFresh()
	}
	watch(() =>params.value.nickName,(val) => {
		reFresh()
	})
</script>

<style lang="scss" scoped>
	.red {
		color: #FA4543;
		font-size: 16px;
	}
	.search-box{
		margin: 12px 20px 20px;
		background-color: #ffffff;
		border-radius: 8px;
		padding: 0px 10px;
		height: 36px;
		.icon-search{
			height: 20px;
		}
		.search-inp{
			width: calc(100% - 40px);
			margin-left: 10px;
			font-size: 12px;
		}
	}
	.sel-asc {
		margin: 0 20px;
		padding: 10px 0;
		color: #999999;
		font-size: 14px;
		min-height: 40px;
		.asc-item {
			margin-right: 20px;
			&:last-child{
				margin-right: 0px;
			}
			.asc-text {
				margin-right: 4px;
	
				&.active {
					color: #FA4543;
				}
			}
	
		}
	
	}
	.agent-box {
		margin: 0 16px 12px;
		padding: 12px;
		background-color: #ffffff;
		border-radius: 8px;
	
		.img-avatar {
			width: 40px;
			height: 40px;
			border-radius: 50%;
		}
	
		.nick-name {
			font-size: 14px;
			font-weight: 400;
			line-height: 20px;
		}
	}
	.no-page-tit{
		font-size: 12px;
		font-weight: 400;
		line-height: 17px;
		letter-spacing: 0px;
		text-align: center;
		color: rgba(51, 51, 51, 0.6);
	}
</style>